import "./App.css";
// import React, { Component } from "react";
import React from "react";

// !函数组件：在16.8.0之前，函数组件也叫做UI组件或者木偶组件
const Header = (props) => {
    console.log(" ~ file: App.js ~ line 5 ~ Header ~ props", props);
    // todo return只能return一个对象
    return (
        <header>
            页面标题{props.title},这是{props.lev}级标题
        </header>
    );
};

// todo 循环渲染
//todo掌握箭头函数，数组方法
const Content = (props) => {
    return (
        <div>
            <Header title="内容标题" lev="2" />
            <ul>{props.data.map((item) => {})}</ul>
            {/* react元素放在一个数组中，仍然能被渲染 */}
            {/* {[<li>内容1</li>, <li>内容2</li>]} */}
            {/* <ul>
                {props.data.map((item) => {
                    return <li>{item}</li>;
                })}
            </ul> */}
        </div>
    );
};

// !类组件
class Content extends React.Component {
    constructor(props) {
        //初始化

        super(props);
        console.log(this.props);

        // this.state = {
        //     title: "列表标题3",
        //     time: new Date().toLocaleTimeString(),
        // };
        this.state = {
            data: [],
        };
        // ! 开始定时器，改变状态
        // !可以放在didmount里面
        // setInterval(() => {
        //     this.setState({ time: new Date().toLocaleTimeString() });
        // }, 1000);
    }
    // !重要记忆 卸载、更新、挂起
    // !更新操作一定要慎重

    // !挂载成功之后只执行一次，发生在页面加载完成之后
    componentDidMount() {
        console.log("did");
        fetch("http://cnodejs.org/api/v1/topics")
            .then((res) => res.json())
            .then((res) => {
                console.log(res);
                this.setState({ data: res.data });
            });
    }
    render() {
        return (
            <div>
                <ul>
                    {this.state.data.map((item) => (
                        <li key={item.id}>{item.title}</li>
                    ))}
                </ul>
            </div>
        );
    }
    // !当接受到新的属性或者状态时，在渲染前被调用
    shouldComponentUpdate() {
        console.log("should");
        return false;
    }

    // *页面显示内容
    //类组件唯一必须的方法
    render() {
        return (
            <div>
                <Header title="列表标题" lev="3" />
                <div>{this.state.time}</div>
                <div>{this.props.data}</div>
            </div>
        );
    }
}
function App() {
    return (
        <div className="App">
            <Header title="React" lev="1" />
            <Content data={["a", "b", "c"]} />
        </div>
    );
}

export default App;
